<template>
  <div class="top w1200">
    <div class="logo-box">
      <a href="/">
        <img v-if="isDetails" class="logo" src="@/assets/img/common/logo.png" alt="logo">
        <img v-else class="logo" src="@/assets/img/common/logo2.png" alt="logo">
        <span>深圳市大数据平台统一门户</span>
      </a>
    </div>

    <div class="user-box">
      <a class="msg" href="javascript:;">
        <img src="@/assets/img/common/msg.png" alt="消息通知">
      </a>

      <p class="user-info">
        <img src="@/assets/img/common/photo.png" alt="用户">
        <span>王小明(教育局-管理员)</span>
        <img src="@/assets/img/common/down.png" alt="箭头">
      </p>
    </div>
  </div>
</template>

<script>
let homeRouter = ['index','shop','policy','news']
export default {
  name: "top-header",
  data() {
    return {
      navActive : 0,
      menuNav: [{
        name: "首页",
        url: 'index'
      },{
        name: "大数据商城",
        url: 'shop'
      },{
        name: "新闻动态",
        url: 'news'
      },{
        name: "政策法规",
        url: 'policy'
      },],

      isDetails : true
    }
  },
  watch:{
    // 处理是否为首页展示状态切换
    '$route.name':{
      handler(newV,oldV){
        this.isDetails = homeRouter.includes(newV)
      },
      immediate:true
    }
  },
  computed: {

  },
  mounted() {

  },
}
</script>

<style scoped lang="scss">
.top{
  padding: 20px 0 ;
  color: #fff;
  .logo-box{
    img{
      width: 38px;
      height: 38px;
      vertical-align: middle;
      margin-right: 8px;
    }
    span{
      font-size: 18px;
      vertical-align: middle;
    }
  }
  .user-box{
    float: right;
    width: 280px;
    position: relative;
    top: -30px;
    text-align: right;
    img{
      width: 21px;
      display: inline-block;
      vertical-align: middle;
    }
    .msg{
      margin-right: 10px;
    }
    .user-info{
      font-size: 14px;
      font-weight: 400;
      display: inline-block;
      span{
        vertical-align: middle;
      }
      img{
        vertical-align: middle;
        margin-right: 5px;
      }
    }
  }
}

</style>
